<template>
  <router-view />
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import emitter from "@/utils/bus";
import tool from "@/utils/tool";

const onScroll = tool.throttle(() => {
  const currentScroll = window.innerHeight + window.scrollY;
  const documentHeight = document.body.scrollHeight;
  if (currentScroll >= documentHeight) {
    emitter.emit('onReachBottom');
  }
}, 500);

onMounted(async() => {
  document.addEventListener('scroll', onScroll);
});

onUnmounted(() => {
  document.removeEventListener('scroll', onScroll);
});
</script>
<style lang="scss">
@import '@/assets/style/visual.css';
#app {
  box-sizing: border-box;
  height: 100%;
}
page {
  height: 100%
}
.vc-page {
  height: 100%;
  .loading {
    padding: 10px 0;
  }
  .el-loading-spinner {
    --el-loading-spinner-size: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    .el-loading-text {
      margin-left: 10px;
    }
  }
}
</style>